<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language='javascript' src='js/jquery-1.11.3.min.js'></script>
<script type="text/javascript" src="js/laypage/laypage.js"></script>
<script language='javascript' src='js/vue/vue.js'></script>
<script language='javascript' src='bootstrap3/js/bootstrap.min.js'></script>
<script language='javascript' src='js/jBox-master/Source/jBox.min.js'></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Image/jBox.Image.min.js"></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Confirm/jBox.Confirm.min.js"></script>
<script type="text/javascript" src="js/jBox-master/Source/plugins/Notice/jBox.Notice.min.js"></script>
<link rel="stylesheet" href="js/laypage/skin/laypage.css"  media="all">
<link rel='stylesheet' href='bootstrap3/css/bootstrap.min.css' type='text/css'></link>
<link rel='stylesheet' href='bootstrap3/css/bootstrap-theme.min.css' type='text/css'></link>
<link rel='stylesheet' href='js/jBox-master/Source/jBox.css' type='text/css'></link>
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Notice/jBox.Notice.css">
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Confirm/jBox.Confirm.css">
<link rel="stylesheet" href="js/jBox-master/Source/plugins/Image/jBox.Image.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/NoticeFancy.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipBorder.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipBorderThick.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipDark.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipSmall.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipSmallGray.css">
<link rel="stylesheet" href="js/jBox-master/Source/themes/TooltipError.css">

</head>

<body>

<form class="navbar-form navbar-left" role="search">
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal2">删除所有选中商品</button>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="按所属类别查询" id="searchForClassName" >
  </div>
  <div class="form-group">
    <input type="text" class="form-control" placeholder="按商品名称查询" id="searchForGoodsName" >
  </div>
  <button type="button" class="btn btn-success" onclick="showGoods(1)">查询</button>
  <input type="reset" class="btn btn-default" value="重置">
  <div class="btn-group">
  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
    按是否卖出查询<span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a onclick="goodsStatus(0)">全部</a></li>
    <li><a onclick="goodsStatus(1)">已卖出</a></li>
    <li><a onclick="goodsStatus(-1)">未卖出</a></li>
  </ul>
  </div>
</form>



<table id="goods" class="table table-striped">
			<tr align="left" style="background-color:#F5F5DC;">
				<th><input type="checkbox" name="allChecked"  onclick="checkAll(this)" /></th>
				<th>所属</th>
				<th>商品名称</th>
				<th>商品图片</th>
				<th>商品价格</th>
				<th>商品数量</th>
				<th>商品备注</th>
				<th>上架时间</th>
				<th>商品状态</th>
				<th>操作</th>
			</tr>
			<tr align="left" v-for="goods in goodsList">
			    <td>
			    <div v-if="goods.status==-1">
			    <input type="checkbox" :value="goods.gid">
			    </div>
			    </td>
			    
			    <td>{{goods.goodsAllClass}}</td>
			    <td>{{goods.gname}}</td>
			    <td>
			    <div class="col-xs-6 col-md-3" style="width:100px;">
			    <div class="thumbnail">
			    <img :src="goods.gphoto" alt="">
			    </div>
			    </div>
			    </td>
			    
			    <td>{{goods.gprice}}</td>
			    <td>{{goods.gsum}}</td>
			    <td>{{goods.gdetail}}</td>
			    <td>{{goods.gtime}}</td>
			    <td>
			    <div v-if=goods.status==1>
			    <p class="text-warning">已卖出</p>
			    </div>
			    <div v-if="goods.status==-1">
			    <p class="text-danger">未卖出</p>
			    </div>
			    </td>
			    
			    <td>
			    <div v-if="goods.status==-1">
			    <!-- 将该商品的id付给此button的value值 -->
			    <button type="button" class="btn btn-danger" id="deleteButton" :value="goods.gid" onclick="checkDeleteGoods(this)" data-toggle="modal" data-target="#myModal1">下架</button> 
			    </div>
			    </td>
			</tr>
		
</table>
<div id="laypage"></div>

 <!-- 单个下架模态框 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">提示信息：</h4>
      </div>
      <div class="modal-body">
                 你确定要下架吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteGoods(this)" id="deleteGoods">确定</button>
      </div>
    </div>
  </div>
</div>
 <!-- 选中下架模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">提示信息：</h4>
      </div>
      <div class="modal-body">
                 你确定要将所有选中的商品要下架吗？
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteCheckGoods(this)" id="deleteGoods">确定</button>
      </div>
    </div>
  </div>
</div>
</body>



<script type="text/javascript">
var vue=new Vue({
	el:'#goods',
	data:{
		goodsList:'',
	}
});
var curr=1;//声明一个当前页变量

//内容分页展示
	function showGoods(currentPage){
		var gameName='';
		var goodsName='';
		className=$("#searchForClassName").val();
		goodsName=$("#searchForGoodsName").val(); 
		curr=currentPage;
		$.ajax({
			 url:'queryGoods.do',
			 type:'post',
			 data:{currentPage:currentPage,pageSize:2,goodsAllClass:className,gname:goodsName,status:status},//此处直接引用外面的status
			 dataType:'json',
			 success:function(result){
				 console.log(result.pages);
				 var goodsList=result.goodsList;
				 console.log(goodsList);
				 vue.goodsList=result.goodsList;
				 laypage({
						cont:$("#laypage"),//容器
						pages:result.pages,//总页数
						curr:currentPage,//当前页
						//limit:5,分页数
						skin:'molv',
						skip:true,
						last:'尾页',
						groups:5,//多少页分组
						jump:function(obj,frist){
							if(!frist){
								showGoods(obj.curr);
							}
						}
					});
			 }
		});
	};
$(function(){
	showGoods(1); 
});
var status=0;    //定义好商品状态在方法外；

//按状态查询
function goodsStatus(count){
	status=count;
	showGoods(1);
}
//点击商品下架
function checkDeleteGoods(evt){
	var gid=$(evt).val();
	$("#deleteGoods").val(gid);
}
//确认商品下架
function deleteGoods(evt){
	var gid=$(evt).val();
	$.ajax({
		url:'deleteGoods.do',
		data:{gid:gid},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				//$.jBox.tip("提示词");
				new jBox('Notice', {
					animation: 'flip',
				    content: '下架成功',
				    color: 'blue'
				});
				showGoods(curr);       //引用之前那个当前页变量
			}else{
				//$.jBox.tip("提示词");
				new jBox('Notice', {
					animation: 'flip',
				    content: '下架失败',
				    color: 'red'
				});
			}
		}
	});
}
//全选按钮点击事件
function checkAll(evt){
	//alert($(evt).val());
	if(evt.checked){
		$("#goods [type='checkbox']").each(function(ind,ele){
			 $(ele).click();
		 });
	}
}
//确认下架选中商品
function deleteCheckGoods(){
	var strArr="";        //声明一个变量来存储gid
	$("#goods [type='checkbox']").each(function(ind,ele){
		 console.log(ele.value);
		 if(ele.checked){
			 if(!isNaN(ele.value)){
				 strArr +=ele.value+',';
			 }
		 }
	 });
	$.ajax({
		url:'deleteCheckGoods.do',
		data:{strGidArr:strArr},
		type:'post',
		dataType:'json',
		success:function(result){
			if(result){
				//$.jBox.tip("提示词");
				new jBox('Notice', {
					animation: 'flip',
				    content: '下架成功',
				    color: 'blue'
				});
				showGoods(curr);       //引用之前那个当前页变量
			}else{
				//$.jBox.tip("提示词");
				new jBox('Notice', {
					animation: 'flip',
				    content: '下架失败',
				    color: 'red'
				});
			}
		}
	});
}
</script>
</html>